<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="shortcut icon" href="images/logo-icon.png" type="image/x-icon" />
		<title th:text="${title}"></title>
		<link rel="stylesheet" href="layui-v2.5.5/css/layui.css" media="all" />
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/login.css" />
		<style type="text/css">
			.red {
				color: red;
			}

			.mt5 {
				margin-top: 5px;
			}

			.msg_error {
				color: red;
				height: 30px;
			}

			.layui-input {
				height: 44px;
			}

			.login-btn {
				width: 100%;
				height: 44px;
				line-height: 44px;
				font-size: 18px;
			}

			.layui-form-item {
				margin-bottom: 0px;
			}

			.mt40 {
				margin-top: 40px;
			}

			.pt40 {
				padding-top: 40px;
			}

			.pb40 {
				padding-bottom: 40px;
			}

			.mt30 {
				margin-top: 30px;
			}

			.mt20 {
				margin-top: 20px;
			}

			.mt10 {
				margin-top: 10px;
			}

			.mt5 {
				margin-top: 5px;
			}
		</style>
	</head>
	<body class="beg-login-bg">
		<div class="beg-login-box pt40 pb40">
			<header>
				<h1 class="sys-title" th:text="${title}"></h1>
			</header>
			<div class="beg-login-main">
				<form action="" class="layui-form">
					<div class="layui-form-item">
						<label class="beg-login-icon">
							<i class="layui-icon">&#xe66f;</i>
						</label>
						<input type="text" name="userCode" autocomplete="off" placeholder="请输入登录用户名" class="layui-input">
					</div>
					<div class="layui-form-item mt30">
						<label class="beg-login-icon">
							<i class="layui-icon">&#xe673;</i>
						</label>
						<input type="password" name="userPass" autocomplete="off" placeholder="请输入登录密码" class="layui-input">
					</div>
					<div class="layui-form-item mt5">
						<input type="checkbox" name="rememberMe" lay-skin="primary" title="记住密码">
					</div>
					<div class="layui-form-item mt20" style="text-align: center;">
						<p class="msg_error" id="error_msg"></p>
					</div>
					<div class="layui-form-item mt20">
						<button class="layui-btn layui-btn-normal login-btn" lay-submit lay-filter="login" style="width: 100%;">
							登录
						</button>
					</div>
				</form>
			</div>
		</div>
		<script type="text/javascript" src="layui-v2.5.5/layui.js"></script>
		<script type="text/javascript" src="js/base.js"></script>
		<script>
			if (top != self) {
				parent.location.href = "/login.html";
			}
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					form = layui.form;
				var $ = layui.jquery;
				
				showAccount($("input[name='rememberMe']"), $("input[name='userCode']"), $("input[name='userPass']"));

				function isNull(obj, error_obj, msg) {
					var flag = true;
					var val = $(obj).val();
					if (!val) {
						$(obj).css('border', '1px solid red');
						$(obj).focus();
						if (msg) {
							$(error_obj).html(msg);
						}
						$(error_obj).show();
						flag = false;
					} else {
						$(obj).css('border', '1px solid #FFF');
						$(error_obj).html("");
					}
					return flag;
				}

				function validNull() {
					var flag = true;
					flag = isNull("input[name='userCode']", "#error_msg", "请输入登录账号");
					if (!flag) {
						return;
					}
					flag = isNull("input[name='userPass']", "#error_msg", "请输入登录密码");
					if (!flag) {
						return;
					}
					return flag;
				}

				form.on('submit(login)', function(data) {
					var result = data.field;

					var flag = validNull();
					if (!flag) {
						return false;
					}

					location.href = "/index.html";

					rememberAccount($("input[name='rememberMe']"), result.userCode, result.userPass);
					localStorage.removeItem("Authorization");
					localStorage.setItem("Authorization", new Date().getTime());

					return false;
				});


				function showAccount(check, userName, userPass) {
					var login_remember = localStorage.getItem("login_remember");
					if (login_remember && login_remember != "undefined") {
						var item = JSON.parse(login_remember);
						var remember_me = item.remember_me;
						if (remember_me == true) {
							$(check).prop("checked", true);
							$(userName).val(item.login_name);
							$(userPass).val(item.login_pass);
							form.render();
						}
					}
				}

				function rememberAccount(check, userName, password) {
					var rememberMe = $(check).prop("checked");
					if (rememberMe == true) {
						var item = {
							login_name: userName,
							remember_me: true,
							login_pass: password
						};
						localStorage.setItem("login_remember", JSON.stringify(item));
					} else {
						localStorage.removeItem("login_remember");
					}
				}
			});
		</script>
	</body>
</html>
